<template>
  <div>
    <h3>Count</h3>
    <button @click="redirect">跳转去List</button>
    <h4>我的年纪是:{{ count }}岁 我的身高是:{{ price }}cm</h4>
    <button @click="add">加一岁</button>
    <button @click="addN">每年涨5cm</button>
    <hr />
    <h3>电影环节</h3>
    <button @click="searchMovie">搜索我喜欢看的电影</button>
    <ul id="list">
      <li v-for="item in movieList" :key="item.albumId">
        {{ item.name }}
      </li>
    </ul>
    <hr />
    <ol id="list1">
      <li v-for="item in movieListN" :key="item.albumId">
        {{ item.name }}
      </li>
    </ol>
    <hr />
    <ol id="list2">
      <li v-for="item in movieListNM" :key="item.albumId">
        {{ item.name }}
      </li>
    </ol>
  </div>
</template>
ic
<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "Count",
  methods: {
    //路由跳转到list
    redirect() {
      this.$router.replace({
        name: "list",
      });
    },
    //add函数
    ...mapMutations("dome", ["add"]),
    //addN函数
    addN() {
      this.$store.commit("dome/addN", { n: 5 });
    },
    //搜索电影
    ...mapActions("dome", ["searchMovie"]),
  },
  computed: {
    ...mapState("dome", ["count", "price"]),
    ...mapState("dome", ["movieList"]),
    ...mapGetters("dome", ["movieListN"]),
    movieListNM() {
      return this.$store.getters["dome/movieListNM"]({ n: 5, m: 7 });
    },
  },
};
</script>

<style>
#list {
  background-color: rgb(212, 187, 24);
  font-size: 20px;
  font-weight: 900;
}
#list1 {
  background-color: rgb(212, 24, 140);
  font-size: 18px;
  font-weight: 500;
}
#list2 {
  background-color: rgb(74, 24, 212);
  font-size: 15px;
  font-weight: 300;
}
</style>